<template>
	<page ref='page'>
		<!-- 家庭成员详情 wwl -->
		<view class="page">
			<view class="list">
				<view class="top1123">
					<image src="../../static/image/icon/shuxie.png" class="img" mode="scaleToFill"></image>
					<view class="textss">
						请填写家庭成员信息
					</view>
				</view>
				
				<view class="row">
					<view class="left">
						姓名
					</view>
					<view class="right">
						<input type="text" class="right_input" placeholder="请填写房主姓名" placeholder-class="text2"
							v-model="infoObj.name" />
					</view>
				</view>
				<view class="row">
					<view class="left">
						手机号
					</view>
					<view class="right">
						<input type="number" maxlength="11" class="right_input " placeholder="请填写房主手机号" placeholder-class="text2"
							v-model="infoObj.phone" />
					</view>
				</view>
			</view>
			
			
			<view class="bottom_box">
				<button class="btn1" @click="onBack()">取消</button>
				<button class="btn2" :loading='loading' @click="onSave()">保存</button>
			</view>
		</view>
	</page>
</template>

<script>
	import {getHouseRecordAdd,getHouseRecordEdit,getHouseRecordInfo,houseRQuarters} from "../static/api.js"
	import {getDefaultHouse} from "@/utils/getRequest.js"
	export default {
		data() {
			return {
				rqname:'选择小区',
				residentialquarters_list:[],//小区数组
				show:false,
				id:null,
				status: null, // 1 增 2 查 3 改
				loading:false,
				regionName: '',
				allloading:false,
				infoObj: {
					residentialquarters_id:0,
					zone_id: 0,
					name: null,
					phone: null,
				}
			}
		},
		methods: {
			//具体的值选择了哪个小区
			changerq(e) {
				console.log(e,'具体选中了哪个小区')
				this.rqname = e
			},
			//选择了哪个小区
			change(e) {
				console.log(e,'选中了哪个小区')
				this.infoObj.residentialquarters_arr = e
				this.infoObj.residentialquarters_id = e.id
			},
			//打开选择小区弹窗
			unipopup(){
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open('bottom')
			},
			onBack() {
				uni.navigateBack()
			},
			changeDefault(x){
				this.infoObj.is_default  = x
			},
			//获取详细地址的小区
			async getResidentialQ(id){
				uni.showLoading()
				try{
					var res = await houseRQuarters({id:id})
					console.log(res,'获取小区信息')
					// this.infoObj = res
					this.residentialquarters_list = res;
					uni.hideLoading()
				}catch{
					uni.hideLoading()
				}
			},
			//获取默认信息
			async getInfo(){
				uni.showLoading()
				try{
					var res = await  getHouseRecordInfo({id:this.id})
					console.log(res,'获取信息')
					this.rqname = res.residentialquarters_arr.name;
					this.infoObj = res
					uni.hideLoading()
				}catch{
					uni.hideLoading()
				}
			},
			async onSave(){
				if(this.loading || this.allloading) return
				if (!this.$regular.funShowToast(null, this.infoObj.name , '请填写姓名！')) return false
				if (!this.$regular.funShowToast('phone', this.infoObj.phone , '请输入联系电话！')) return false
				
				
				console.log(this.infoObj,'提交的信息')
				
				
				if(this.status == 1){
					this.onFun()
				}else{
					// uni.showModal({
					// 	title: '注意',
					// 	content: '更认房屋档案后，精算单会被清空！',
					// 	success: res => {
					// 		if(res.confirm) this.onFun()
					// 	},
					// })
					
					this.onFun()
				}
				
			},
			async onFun(){
				this.loading = true
				try{
					if(this.status == 1){
						// var res = await getHouseRecordAdd({...this.infoObj,house_type:this.infoObj.house_type.join(','),pic_arr:this.infoObj.pic_arr.join(',')})
						var res = await getHouseRecordAdd({...this.infoObj,house_type:this.infoObj.house_type.join(',')})
					}else{
						// var res = await getHouseRecordEdit({...this.infoObj,house_type:this.infoObj.house_type.join(','),pic_arr:this.infoObj.pic_arr.join(',')})
						var res = await getHouseRecordEdit({...this.infoObj,house_type:this.infoObj.house_type.join(',')})
					}
					var resD = await getDefaultHouse()
					this.$store.commit('setDefaultHouse',Object.prototype.toString.call(resD) === '[object Object]' ? resD : null)
					this.$global.$editUploadBack(1,'housingArchives')
					uni.showToast({title:'保存成功',icon:'none'})
					// 需要刷新页面
					setTimeout(()=>{
						uni.hideLoading()
						this.loading = false
						uni.navigateBack({delta: 1})
					},1000)
				}catch{
					uni.hideLoading()
					this.loading = false
				}
			},
			changeCity(e) {
				console.log(e,'选择地址')
				this.regionName = e.name
				this.infoObj.zone_id = e.code[e.code.length-1]
				
				this.getResidentialQ(e.code[e.code.length-1])
			},
			
		},
		onLoad(params) {
			this.status = params.status
			this.id = params.id
			if (params.status && params.status != 1) {
				uni.setNavigationBarTitle({
					title: `${params.status == 2 ?'查看' :'更改'}家庭成员信息`
				});
			}
			if(this.status != 1) this.getInfo()
			
		}
	}
</script>

<style lang="scss" scoped>
	.page{
		padding-bottom: 120rpx;
	}
	.bottom_box {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		display: flex;
		button[loading]::before {
			align-self: center
		}
		button {
			display: flex;
			justify-content: center;
			align-item: center;
			padding: 0;
			border-radius: 0;
		}
	
		button::after {
			border: none;
		}
	
		.btn2 {
			width: 482rpx;
			height: 104rpx;
			line-height: 104rpx;
			text-align: center;
			background: #ff9b03;
			color: #fff;
			font-size: 32rpx;
		}
	
		.btn1 {
			width: 268rpx;
			height: 104rpx;
			background: #e8e8e8;
			line-height: 104rpx;
			text-align: center;
			color: #ADADAD;
			font-size: 32rpx;
		}
	}
	.row3{
		width: 100%;
		padding: 48rpx 29rpx 31rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.row {
		width: 100%;
		padding: 40rpx 40rpx 8rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		border-bottom: 2rpx solid #f4f4f4;
		.left {
			font-size: 30rpx;
			line-height: 44rpx;
			color: #121212;
			font-weight: 500;
		}
		.right {
			width: calc(100% - 5em);
		}

		.right_input {
			width: 100%;
			text-align: end;
		}

		.right3 {
			width: calc(100% - 5em);
			display: flex;
			flex-wrap: wrap;
		}
		
		.right4 {
			width: calc(100% - 18em);
		}

		.row_key {
			display: flex;
			align-items: flex-end;

			.text_type {
				width: 40rpx;
				text-align: center;
			}

			text {
				margin: 0rpx 10rpx;
			}
		}

		.right2 {
			display: flex;
			justify-content: space-between;
			.iconfont{
				line-height: 22px;
			}
			
			>view:nth-child(1) {
				width: calc(100% - 40rpx);
				text-align: right;
			}
		}
	}
	/deep/ .text2 {
		font-size: 30rpx;
		line-height: 44rpx;
		color: #A4A4A4;
		// color: #121212;
		// font-weight: 600;
	}
	
	/deep/ .text66 {
		font-size: 30rpx;
		line-height: 44rpx;
		// color: #A4A4A4;
		color: #121212;
		font-weight: 600;
	}
	
	.text3 {
		font-size: 30rpx;
		line-height: 44rpx;
		color: #121212;
	}
	
	.text1 {
		font-size: 30rpx;
		line-height: 44rpx;
		color: #666;
	}
	.img_list{
		display: flex;
		flex-wrap: wrap;
		padding: 0 38rpx;
		width: 100%;
		box-sizing: border-box;
		.img_row{
			width: 156rpx;
			height: 156rpx;
			margin-right: 16rpx;
			margin-bottom: 20rpx;
			position: relative;
			image{
				width: 156rpx;
				height: 156rpx;
			}
			.icon{
				position: absolute;
				right: -16rpx;
				top:-16rpx;
				z-index: 1;
				image{
					width: 32rpx;
					height: 32rpx;
				}
			}
			&:nth-child(4n) {
				margin-right: 0;
			}
		}
	}
	.top1123{
		padding: 19px 14px 15px;
		.img{
			width: 25px;
			    height: 25px;
			position: relative;
			    top: 6px;
		}
		.textss{
			display: inline-block;
			    margin-left: 12px;
			    font-size: 16px;
			    font-weight: 600;
			    line-height: 25px;
			    height: 25px;
		}
	}
	.chengnuo{
		background: #ff5403;
		    color: #fff;
		    width: 100%;
		    padding: 8px 20px;
		    box-sizing: border-box;
		    display: flex;
		    justify-content: space-between;
		    border-bottom: 1px solid #f4f4f4;
	}
	.chengnuo2{
		background: #ff9b03;
		    color: #fff;
		    width: 100%;
		    padding: 8px 20px;
		    box-sizing: border-box;
		    display: flex;
		    justify-content: space-between;
		    border-bottom: 1px solid #f4f4f4;
	}
</style>
